<template>
  <div>
    <van-nav-bar
      :z-index="999"
      :fixed="true"
      left-arrow
      @click-left="onClickLeft"
      title="帖子详情"
      :placeholder="true"
    >
    </van-nav-bar>

    <!-- 帖子详情 -->
    <div class="PostsPage">
      <div class="pp_header">
        <img :src="details.img" alt />
        <div>
          <p>{{ details.name }}</p>
          <div>{{ details.detailTime }}</div>
        </div>
        <div v-if="details.articleTypeId == '1'">科目一</div>
        <div v-else-if="details.articleTypeId == '2'">科目二</div>
        <div v-else-if="details.articleTypeId == '3'">科目三</div>
        <div v-else-if="details.articleTypeId">科目四</div>
        <div v-else>拿本</div>
      </div>
      <div v-if="!image.length == 0">
        <!-- <div class="details-content">{{ details.detailContent }}</div> -->
        <div>
          <div class="details-images">
            <img v-for="(item, index) in image" :key="index" :src="item" />
          </div>
        </div>
      </div>
      <div v-else v-html="details.detailContent"></div>

      <!-- 评论区 -->
      <div class="pp_discuss">
        <div class="pp_discusss"></div>
        <div class="pp_dis border-bottom">
          <p>评论区</p>
          <div>{{ length }}条</div>
        </div>
        <div
          class="pp_content border-bottom"
          v-for="(item, index) in list"
          :key="index"
        >
          <div class="pp_text">
            <img :src="item.img" />
            <div>
              <p>{{ item.name }}</p>
              <div>{{ item.commentTime }}</div>
              <p>{{ item.commentContent }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="sd-input">
      <input type="text" placeholder="说点什么吧~" />
      <div>
        <img src="../../assets/images/16.png" alt />
        <p>24</p>
      </div>
      <img src="../../assets/images/63.png" alt />
    </div>
    <div class="sd-input">
      <input type="text" v-model="value" placeholder="说点什么吧~" />
      <div>
        <div class="sd-announce" @click="announce">发表</div>
      </div>
      <div @click="cancel" class="sd-cancel">取消</div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import {
  CommunityDetails,
  DiscussList,
  CommunityAppraise
} from "../../assets/js/api/exam.js";
export default {
  name: "PostsPage",
  data() {
    return {
      value: "", // 评论内容
      details: {}, // 帖子详情
      list: [], // 评论列表
      length: "",
      image: []
    };
  },
  created() {
    let dsBridge = require("dsbridge");
    dsBridge.call("goBack", "", function() {
      history.go(-1);
    });

    // 接口的调用
    // console.log(this.$route.params.id);
    CommunityDetails(this.$route.params.id).then(res => {
      console.log(res);
      this.details = res.data.dataInfo;
      this.image = res.data.imgs;
      // console.log(this.image.length == 0);
    });

    // 评论列表
    this.DiscussList();
  },

  methods: {
    // 评论按钮
    // 当点击确定按钮时执行的操作
    announce() {
      if (this.value == "") {
        Toast("评价内容不能为空");
        return;
      }
      let obj = {
        articleListId: this.$route.params.id,
        commentContent: this.value
      };
      // console.log(obj);
      CommunityAppraise(obj).then(res => {
        // console.log(res);
        if (res.code == 0) {
          this.value = "";
          this.DiscussList();
          Toast.success("评价成功");
        }
      });
    },

    // 当点击取消时，清空value值
    cancel() {
      this.value = "";
    },

    // 评论列表
    DiscussList() {
      // console.log(this.$route.params.id);
      DiscussList(this.$route.params.id).then(res => {
        // console.log(res);
        this.length = res.data.length;
        if (res.code == 0) {
          this.list = res.data;
        }
      });
    },

    onClickLeft() {
      this.$router.go(-1);
    }
  }
};
</script>

<style></style>
